<template>
    <div class="avue-tags" v-if="setting.tag" @click="contextmenuFlag = false">
        <!-- tag盒子 -->
        <div v-if="contextmenuFlag" class="avue-tags__contentmenu"
            :style="{ left: contentmenuX + 'px', top: contentmenuY + 'px' }">
            <div class="item" @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</div>
            <div class="item" @click="closeAllTags">{{ $t('tagsView.closeAll') }}</div>
        </div>
        <div class="avue-tags__box">
            <el-tabs v-model="active" type="card" :closable="tagLen !== 1" @tab-click="openTag" @edit="menuTag">
                <el-tab-pane v-for="(item, index) in tagList" :key="index" :label="generateTitle(item)"
                    :name="item.fullPath">
                    <template #label>
                        <span>
                            {{ generateTitle(item) }}
                            <i class="el-icon-refresh" :class="{ 'turn': refresh }" @click="handleRefresh"
                                v-if="active == item.fullPath"></i>
                        </span>
                    </template>

                </el-tab-pane>

            </el-tabs>
            <!-- <el-dropdown class="avue-tags__menu">
                <el-button type="primary">
                    {{ $t('tagsView.menu') }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="openSearch">{{ $t('tagsView.search') }}</el-dropdown-item>
                        <el-dropdown-item @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</el-dropdown-item>
                        <el-dropdown-item @click="closeAllTags">{{ $t('tagsView.closeAll') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->

            <el-dropdown class="avue-tags__menu" style="margin: 5px 30px 5px 20px;">
                <img style="width: 20px;cursor: pointer;" src="../../images/yonghu-10@2x.png">
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="logout" divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

    </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    name: "tags",
    data () {
        return {
            refresh: false,
            active: "",
            contentmenuX: "",
            contentmenuY: "",
            contextmenuFlag: false
        };
    },
    watch: {
        tag: {
            handler (val) {
                this.active = val.fullPath;
            },
            immediate: true,
        },
        contextmenuFlag () {
            window.addEventListener("mousedown", this.watchContextmenu);
        }
    },
    computed: {
        ...mapGetters(["tagWel", "tagList", "tag", "setting", "userInfo"]),
        tagLen () {
            return this.tagList.length || 0;
        }
    },
    methods: {
        logout () {
            this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
                confirmButtonText: this.$t("submitText"),
                cancelButtonText: this.$t("cancelText"),
                type: "warning"
            }).then(() => {
                this.$store.dispatch("LogOut").then(() => {
                    this.$router.push({ path: "/login" });
                });
            });
        },
        openSearch () {
            this.$store.commit('SET_IS_SEARCH', true)
        },
        handleRefresh () {
            this.refresh = true;
            this.$store.commit('SET_IS_REFRESH', false);
            setTimeout(() => {
                this.$store.commit('SET_IS_REFRESH', true);
            }, 100)
            setTimeout(() => {
                this.refresh = false;
            }, 500)
        },
        generateTitle (item) {
            return this.$router.$avueRouter.generateTitle({
                ...item,
                ...{
                    label: item.name
                }
            });
        },
        watchContextmenu (event) {
            if (!this.$el.contains(event.target) || event.button !== 0) {
                this.contextmenuFlag = false;
            }
            window.removeEventListener("mousedown", this.watchContextmenu);
        },
        handleContextmenu (event) {
            let target = event.target;
            let flag = false;
            if (target.className.indexOf("el-tabs__item") > -1) flag = true;
            else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
                target = target.parentNode;
                flag = true;
            }
            if (flag) {
                event.preventDefault();
                event.stopPropagation();
                this.contentmenuX = event.clientX;
                this.contentmenuY = event.clientY;
                this.tagName = target.getAttribute("aria-controls").slice(5);
                this.contextmenuFlag = true;
            }
        },
        menuTag (value, action) {
            if (action === "remove") {
                let { tag, key } = this.findTag(value);
                this.$store.commit("DEL_TAG", tag);
                if (tag.fullPath === this.tag.fullPath) {
                    tag = this.tagList[key - 1]
                    this.$router.push({
                        path: tag.path,
                        query: tag.query
                    })
                }
            }
        },
        openTag (item) {
            let value = item.props.name
            let { tag } = this.findTag(value)
            this.$router.push({
                path: tag.path,
                query: tag.query
            })
        },
        findTag (fullPath) {
            let tag = this.tagList.find(item => item.fullPath === fullPath);
            let key = this.tagList.findIndex(item => item.fullPath === fullPath);
            return { tag, key }
        },
        closeOthersTags () {
            this.contextmenuFlag = false;
            this.$store.commit('DEL_TAG_OTHER')
        },
        closeAllTags () {
            this.contextmenuFlag = false;
            this.$store.commit('DEL_ALL_TAG')
            this.$router.push(this.tagWel);
        }
    }
};
</script>


